<template>
    <view class="recycle_goods_detail-container">
        <!-- 质检情况 -->
        <view class="test-status white">
            <view class="xl bold">{{ txtStatus.title }}</view>
            <view class="xs">{{ txtStatus.explain }}</view>
        </view>
        
        <!-- 评估信息 -->
        <view class="goods-info mt20">
            <view class="goods-info-title">自主评估情况 ({{ devicesParams.length }}项)</view>
            <view class="md mt10">
                <block v-for="(item, index) in devicesParams" :key="index">
                    <view class="goods-info-item">
                        <view class="muted">{{ item.item_name }}</view>
                        <view>{{ item.spec_name }}</view>
                    </view>
                </block>
            </view>
        </view>
        
        <!-- 拍照凭证 -->
        <template v-if="pictures.length">
            <view class="goods-picture mt20">
                <view class="goods-picture-title">拍照凭证</view>
                <view class="goods-picture-content">
                    <block v-for="(item, index) in pictures" :key="index">
						<view @tap="showPicture(index)">
							<u-image 
							  class="mr20 mt20" 
							  :src="item" 
							  width="200" 
							  height="200" 
							  border-radius="3px"
							/>
						</view>
                    </block>
                </view>
            </view>
        </template>
        
        <!-- 留言 -->
        <view class="goods-remarks mt20">
            <view class="goods-remarks-title">商家备注</view>
            <view class="goods-remarks-content mt20">{{ remarks }}</view>
        </view>
    </view>
</template>


<script>
    import { getAssessDetail } from '@/api/recycle.js';
    
    export default {
        data() {
            return {
                pictures: [],       // 照片凭证数据
                devicesParams: [],  // 设备规格参数
                remarks: '',         // 留言
                testStatus: '',     // 测试状态 【0-待商家质检；1-质检通过；2-质检不通过】
                orderStatus: '',    // 订单状态
                txtStatus: {},      // 验机情况
            }
        },
        methods: {
            // 查看图片
            showPicture(index) {
                uni.previewImage({
                    current: index,
                    urls: this.pictures
                });
            },
            
            // 状态情况
            outStatusTxt(status = 0) {
                switch(status) {
                    case 0: return {
                        title: '等待商家质检',
                        explain: '商家在收商品后的1-2个工作日内出质检结果'
                    }
                    case 1: return {
                        title: '质检通过',
                        explain: '恭喜你，质检已通过'
                    }
                    case 2: return {
                        title: '质检不通过',
                        explain: '实物不符'
                    }
                }
            }
        },
        
        onLoad(options) {
            const order_id = options.id;
            console.log(options);
            getAssessDetail({ ro_id: order_id }).then(res => {
                if (res.code != 1) return;
                
                const data = res.data;
                this.devicesParams = data.item;
                this.remarks = data.remarks;
                this.testStatus = data.test_status;
                this.pictures = data.assess_images;
                this.orderStatus = data.order_status;
                this.txtStatus = this.outStatusTxt(data.test_status);
            });
        }
    }
</script>


<style scoped>
    .recycle_goods_detail-container {
        padding: 20rpx;
    }
    
    .test-status {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 140rpx;
        padding: 0 20rpx;
        border-radius: 10px;
        background: url(../../static/images/recycle_test_result_bg.png) no-repeat;
        background-size: 100% 100%;
    }
    
    .goods-info,
    .goods-picture,
    .goods-remarks {
        padding: 20rpx;
        border-radius: 7px;
        background-color: #FFFFFF;
        color: #333333;
    }    
    
    .goods-info-title,
    .goods-picture-title,
    .goods-remarks-title {
        font-size: 32rpx;
        font-weight: 500rpx;
    }
    
    .goods-remarks-content {
        min-height: 80rpx;
        font-size: 30rpx;
        color: #333333;
    }
    
    .goods-info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100rpx;
    }
    
    .goods-info-item:nth-child(n + 2) {
        border-top: 1px solid #E5E5E5;
    }
    
    .goods-picture {
        padding: 20rpx;
        background-color: #FFFFFF;
    }
    
    .goods-picture-content {
        display: flex;
        flex-wrap: wrap;
        margin-top: 20rpx;
        padding-bottom: 20rpx;
    }
</style>
